<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <span>停车场管理</span>
                <el-button style="float: right" type="primary" @click="handleAdd">添加停车场</el-button>
            </div>
            
            <!-- 搜索区域 -->
            <el-form :inline="true" :model="queryParams" class="search-form">
                <el-form-item label="停车场名称">
                    <el-input v-model="queryParams.lotName" placeholder="请输入停车场名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="停车场类型">
                    <el-select v-model="queryParams.lotType" placeholder="请选择类型" clearable>
                        <el-option label="路边" value="1"></el-option>
                        <el-option label="场库" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格区域 -->
            <el-table :data="parkingList" border>
                <el-table-column prop="lotName" label="停车场名称"></el-table-column>
                <el-table-column prop="lotCode" label="停车场编码"></el-table-column>
                <el-table-column prop="lotType" label="类型">
                    <template slot-scope="scope">
                        {{ scope.row.lotType === '1' ? '路边' : '场库' }}
                    </template>
                </el-table-column>
                <el-table-column prop="totalSpots" label="总泊位数"></el-table-column>
                <el-table-column prop="usedSpots" label="已用泊位数"></el-table-column>
                <el-table-column prop="freeSpots" label="空闲泊位数"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.status === '0' ? '正常' : '停用' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加/修改对话框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="500px">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="停车场名称" prop="lotName">
                    <el-input v-model="form.lotName"></el-input>
                </el-form-item>
                <el-form-item label="停车场编码" prop="lotCode">
                    <el-input v-model="form.lotCode"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="lotType">
                    <el-select v-model="form.lotType" style="width: 100%">
                        <el-option label="路边" value="1"></el-option>
                        <el-option label="场库" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="总泊位数" prop="totalSpots">
                    <el-input-number v-model="form.totalSpots" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listLot, addLot, updateLot, deleteLot } from '@/api/parkinglotmanagement/parking'

export default {
    data() {
        return {
            // 查询参数
            queryParams: {
                lotName: '',
                lotType: ''
            },
            // 停车场列表
            parkingList: [],
            // 对话框控制
            dialog: {
                title: '',
                visible: false
            },
            // 表单对象
            form: {
                lotId: undefined,
                lotName: '',
                lotCode: '',
                lotType: '',
                totalSpots: 0,
                address: ''
            },
            // 表单校验规则
            rules: {
                lotName: [
                    { required: true, message: '请输入停车场名称', trigger: 'blur' }
                ],
                lotCode: [
                    { required: true, message: '请输入停车场编码', trigger: 'blur' }
                ],
                lotType: [
                    { required: true, message: '请选择停车场类型', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表数据
        async getList() {
            try {
                const response = await listLot({
                    lotName: this.queryParams.lotName,
                    lotType: this.queryParams.lotType
                })
                if (response.code === 200) {
                    this.parkingList = response.data
                } else {
                    this.$message.error(response.msg || '获取停车场列表失败')
                }
            } catch (error) {
                console.error('获取停车场列表出错:', error)
                this.$message.error('获取停车场列表失败')
            }
        },
        // 查询按钮
        handleQuery() {
            this.getList()
        },
        // 重置查询
        resetQuery() {
            this.queryParams = {
                lotName: '',
                lotType: ''
            }
            this.getList()
        },
        // 添加按钮
        handleAdd() {
            this.dialog.title = '添加停车场'
            this.dialog.visible = true
            this.form = {
                lotId: undefined,
                lotName: '',
                lotCode: '',
                lotType: '',
                totalSpots: 0,
                address: ''
            }
        },
        // 修改按钮
        handleEdit(row) {
            this.dialog.title = '修改停车场'
            this.dialog.visible = true
            this.form.lotId = row.lotId
            this.form.lotName = row.lotName
            this.form.lotCode = row.lotCode
            this.form.lotType = row.lotType
            this.form.totalSpots = row.totalSpots
            this.form.address = row.address
        },
        // 删除按钮
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该停车场吗？', '提示', {
                    type: 'warning'
                })
                const response = await deleteLot({ lotId: row.lotId })
                if (response.code === 200) {
                    this.$message.success('删除成功')
                    this.getList()
                } else {
                    this.$message.error(response.msg || '删除失败')
                }
            } catch (error) {
                console.error('删除停车场出错:', error)
                if (error !== 'cancel') {
                    this.$message.error('删除失败')
                }
            }
        },
        // 提交表单
        submitForm() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        if (this.form.lotId) {
                            // 修改停车场
                            const response = await updateLot(this.form)
                            if (response.code === 200) {
                                this.$message.success('修改成功')
                                this.dialog.visible = false
                                this.getList()
                            } else {
                                this.$message.error(response.msg || '修改失败')
                            }
                        } else {
                            // 添加停车场
                            const response = await addLot(this.form)
                            if (response.code === 200) {
                                this.$message.success('添加成功')
                                this.dialog.visible = false
                                this.getList()
                            } else {
                                this.$message.error(response.msg || '添加失败')
                            }
                        }
                    } catch (error) {
                        console.error('提交表单出错:', error)
                        this.$message.error(this.form.lotId ? '修改失败' : '添加失败')
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.search-form {
    margin-bottom: 20px;
}
</style>
